<template>
  <view class="video-container">
    <video v-if="videoUrl" id="videoDom" object-fit="fill" :src="videoUrl" :autoplay="true"
      :show-fullscreen-btn="false"></video>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import type { LearnBaseQuestionInfo } from '@/api/base/types'
  const videoUrl = ref<string>()
  const question = ref<LearnBaseQuestionInfo>()
  const videContent = ref<UniNamespace.VideoContext>()

  onLoad((options: any) => {
    videoUrl.value = "";
    if (options && options.url) {
      videoUrl.value = options.url
      question.value = JSON.parse(options.data);
    } else {
      uni.showToast({
        title: "缺少视频地址"
      })
      setTimeout(() => {
        uni.navigateBack();
      }, 1500)
    }
    videContent.value = uni.createVideoContext("videoDom")
  })

</script>

<style lang="scss" scoped>
  .video-container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #000;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    #videoDom {
      width: 100vw;
      height: 133.33vw;
    }
  }
</style>